Typsnitt

I shot the Serif Exempel på snirklig anfang för texten Lorem ipsum Exempel på integrerad anfang Exempel på färgglad anfang Writing Typographic Symbols

Förkortningar

  • TTF - True Type Font
  • OTF - Open Type Fonts (Adobe)
  • EOT - Embedded Open Type
  • WOFF - Web Open Font Format (Mozilla)
  • SVG - Scalable Vector Graphics
  • WOFF2 -

  • FOUT - Flash of Unstyled Text

Filändelser

  • .ttf
  • .eot
  • .svg
  • .woff
  • .woff2
Logotyp för FA - Font Awesome

Namn och kodpunkt för ikoner från Font Awesome 4.7.0 (den sista versionen som var helt gratis)

  • fa-font

Snabbkommandon

  • ⌘0Förvald typsnittsstorlek
  • ⌘+Större
  • ⌘-Mindre
Svartvit skiss av Aldus Manutius

Person

  • Aldus Manutius
Lorem ipsum

Text för exempel

Double-story and single-story lowercase miniscule G Serif och Sans Serif 0 vs O

Vad är en serif?

En serif är en bokstav med ett typsnitt där bokstäverna har "klackar".

Logotyp för FontPrep Typsnittsbok

Program

CSS 3 logotyp

Programmeringsspråk

Definiera ett helt eget typsnitt i CSS

@font-face { font-family: myFirstFont; src: url(sansation_light.woff); }

Använda ett helt eget typsnitt i CSS

div { font-family: myFirstFont; }

Regler i CSS

  • font-display
  • font-family
  • font-feature-settingsny
  • font-kerningny
  • font-language-overrideny
  • font-size
  • font-size-adjustny
  • font-stretchny
  • font-style
  • font-synthesisny
  • font-variant
  • font-weight
Kerning Exempel på ligaturer

Exempel på ligaturer

ff
fi
fl
ffi
ffl

ff
fi
fl
ffi
ffl

Logotyp för Font Awesome

Font Awesome

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.1/css/all.css"> <script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>

Material Icons

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Typsnitt från Google

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans"> @import url(//fonts.googleapis.com/css?family=Open+Sans);

Typsnitt från egen server

@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ }

Mapp för typsnitt på operativsystemet Mac

/Volumes/Macintosh HD/Library/Fonts /System/Library/Fonts Logotyp för Font Awesome Comic sans Typsnittet Fraktur

Exempel på vanliga typsnitt

FiraCode Hand of Sean Braille Neue Standard

Exempel på fler typsnitt

Ikon med logotyp för DA FONT

Applikation

Ikoner i block Logotyp för Fontello

Externa länkar

Logotyp för MyFonts Logotyp för Stanley Yard font

Importera funktion som används för att ändra typsnitt i React

import { Typography } from "common/components";